<template>
  <div class="container">
    <div class="top">
      <div class="top-left">
        <ul>
          <li v-for="(item, index) in list" :key="index" class="stat-info">
            <p class="left-img">
              <img src="../assets/qr.png" alt="">
            </p>
            <p class="right-total">
              <span>{{item.total}}</span>
              <span>{{item.title}}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="top-right">
        <div class="partyActivity" ref="partyActivity"></div>
        <div class="empty" v-if="flag">暂无相关数据</div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="processes" ref="processes"></div>
      </div>
      <div class="bottom-right">
        <div class="article" ref="article"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryActivity, queryActityCount, queryByType } from '@/api/home'
const title = {
  ac1: 'e惠民生',
  ac2: '党建活动',
  ac3: '党建赋能站'
}
const status = {
  js: '已结束',
  jxz: '进行中',
  wks: '未开始'
}
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      list: [],
      partyChart: null,
      processesChart: null,
      articleChart: null,
      flag: false
    }
  },
  mounted () {
    this.getActivityList()
    this.queryActityCount()
    this.initProcessesChart()
    window.addEventListener('resize', () => {
      this.partyChart.resize()
      this.processesChart.resize()
      this.articleChart.resize()
    })
  },
  methods: {
    // 获取活动数量
    getActivityList () {
      queryActivity().then(res => {
        this.list = Object.keys(res).map(item => {
          return {
            title: title[item],
            total: res[item]
          }
        }).reverse()
      })
    },
    // 查询活动数量党建活动&党建赋能站
    async queryActityCount () {
      const data = await queryByType()
      this.initArticleChart([
        { value: data?.post6 || 0, name: '村集体经济' },
        { value: data?.post5 || 0, name: '组织生活' },
        // { value: 580, name: '党建品牌' },
        { value: data?.post4 || 0, name: '主题教育' }
      ])
      this.initPartyChart([
        { value: data?.post10 || 0, name: '机关活动' },
        { value: data?.post9 || 0, name: '乡镇（街道）' },
        { value: data?.post20 || 0, name: '两新组织活动' },
        { value: data?.post21 || 0, name: '共筑共建' }
      ])
    },
    // 党建活动
    initPartyChart (data) {
      const flag = data.every(item => item.value === 0)
      this.flag = flag
      this.partyChart = echarts.init(this.$refs.partyActivity)
      var option
      option = {
        title: {
          text: '党建活动数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '8%',
          left: 'center'
        },
        series: [
          {
            name: '党建活动数据统计',
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['50%', '85%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data
          }
        ]
      }

      option && this.partyChart.setOption(option)
    },
    // 活动数据统计
    async initProcessesChart () {
      this.processesChart = echarts.init(this.$refs.processes)
      const data = await queryActityCount()
      const seriesData = Object.keys(data).map(item => {
        return {
          name: status[item],
          value: data[item]
        }
      })
      var option

      option = {
        title: {
          text: '活动数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '8%',
          left: 'center'
        },
        series: [
          {
            name: '活动数据统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      }

      option && this.processesChart.setOption(option)
    },
    // 党建赋能站文章统计
    initArticleChart (data) {
      this.articleChart = echarts.init(this.$refs.article)
      var option

      option = {
        title: {
          text: '党建赋能站文章数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          top: '8%'
        },
        series: [
          {
            name: '党建赋能站文章数据统计',
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && this.articleChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 90px);
  padding: 40px 40px 0 40px;
  width: 100%;
}
.top, .bottom {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-right, .bottom-right {
  width: 60%;
  height: 100%;
  position: relative;
}
.bottom-left, .top-left {
  width: 40%;
  height: 100%;
}

.top-left  ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-left li {
  height: 70px;
  width: 40%;
  border: 1px solid #ccc;
  display: flex;
  margin-bottom: 40px;
  img {
    width: 30px;
    height: 40px;
  }
  .left-img {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:nth-child(1) .left-img {
    background-color: #80b9bc;
  }
  &:nth-child(2) .left-img {
    background-color: #5379ac;
  }
  &:nth-child(3) .left-img {
    background-color: #663ce4;
  }
  .right-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
}
.partyActivity, .processes, .article {
  width: 100%;
  height: 100%;
}
.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
}
</style>
